<script setup lang="ts">
import { getCurrentInstance, onMounted, ref } from 'vue'
import { Message } from 'element-ui'
import DetailTable from '@/views/project-update/annual-plan/detail-table.vue'
import { addAnnualPlan, getAnnualPlan } from '@/api/project-update/annual-plan'
import { queryArea } from '@/api/question'

const vm = getCurrentInstance()

const route = vm.proxy.$route
const router = vm.proxy.$router
const user = vm.proxy.$store.state.app.user
const currentUser = vm.proxy.$store.state.user.currentUser
const roleLevel = user.roleLevel

const handleCancel = () => {
  router.go(-1)
}

const month = ref('')
const regionId = ref('')
const areaName = ref('')

const detailTableRef = ref(null)

const params = route.query
const { pkid, year, id, name, es: status } = params

const regionList = ref([])

const getAreaInfo = async () => {
  try {
    const res = await queryArea({})
    if (res.success) {
      regionList.value = res.data[0].children
    }
  } catch (error) {
    console.error(error)
  }
}

// console.log('params', params)

onMounted(async () => {
  await getAreaInfo()
  // console.log(user)
  if (!pkid) {
    if (roleLevel === 0 || roleLevel === 5) {
      //
    } else {
      regionId.value = user.refId
      areaName.value = user.userName
    }
  } else {
    getAnnualPlan({ pkid }).then((res) => {
      if (res.success) {
        regionId.value = id
        areaName.value = name
        month.value = year
        detailTableRef.value.inputData(res.data || [])
      }
    })
  }
})

const handleSaveClick = (status: 0 | 1) => {
  const projectYearPlanRelList = detailTableRef.value?.getSubmitData()
  const projectYearPlanInfo = {
    pkid,
    regionId: regionId.value,
    year: month.value,
    regionName: areaName.value,
    status,
  }
  projectYearPlanRelList.map((item) => {
    item.year = month.value
  })
  addAnnualPlan({ projectYearPlanInfo, projectYearPlanRelList }).then((res) => {
    if (res.success) {
      Message.success(res.data)
      router.go(-1)
    } else {
      Message.error(res.message)
    }
  })
}
</script>

<template>
  <div class="add-annual-plan show-detail-form">
    <div class="nav">
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/project-update/annual-plan' }"
            ><span class="breadcrumb-title">列表</span></el-breadcrumb-item
          >
          <el-breadcrumb-item>{{
            status ? '详情' : '填报'
          }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="content">
      <div class="content-main">
        <div class="fill-title">
          <el-date-picker
            v-model="month"
            type="year"
            placeholder="选择年"
            :disabled="!!status"
            format="yyyy"
            value-format="yyyy"
          >
          </el-date-picker>
          <template v-if="roleLevel === 0 || roleLevel === 5">
            <el-select
              v-model="regionId"
              placeholder="请选择选择填报区县"
              :disabled="!!status"
            >
              <el-option
                v-for="item in regionList"
                :key="item.pkid"
                :label="item.areaName"
                :value="item.pkid"
              ></el-option>
            </el-select>
          </template>
          <template v-else> {{ areaName }} </template>城市更新年度计划表
        </div>
        <div class="fill-remark">
          填报单位：<template v-if="roleLevel === 0 || roleLevel === 5">
            <el-select v-model="regionId" placeholder="待选择" disabled>
              <el-option
                v-for="item in regionList"
                :key="item.pkid"
                :label="item.areaName"
                :value="item.pkid"
              ></el-option>
            </el-select>
          </template>
          <template v-else>{{ areaName }}</template
          >人民政府（管委会）（盖章）
        </div>
        <detail-table
          ref="detailTableRef"
          :status="status"
          :regionId="regionId"
          :region-list="regionList"
        />
      </div>
      <div class="buttons">
        <el-button class="cancel" @click="handleCancel">取消</el-button>
        <template v-if="!status">
          <el-button class="save" type="primary" @click="handleSaveClick(0)"
            >保存</el-button
          >
          <el-button class="publish" @click="handleSaveClick(1)"
            >提交</el-button
          >
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.add-annual-plan {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  padding: 20px;
  background-color: rgba(244, 248, 254, 1);

  .content {
    width: calc(100% - 40px);
    height: calc(100% - 70px);
    position: absolute;
    top: 65px;
    bottom: 0;

    .divider {
      width: 100%;
      height: 1px;
      background: #e7f0ff;
      border-radius: 1px 1px 0px 0px;
      margin: 20px 0;
    }

    .content-main {
      height: calc(100% - 100px);
      background: #ffffff;
      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      padding: 13px 16px 13px 16px;
      overflow-y: auto;

      .fill-title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        font-weight: 500;
        text-align: center;

        :deep(.el-date-editor) {
          margin-right: 5px;
        }
      }

      .fill-remark {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 14px;
      }
    }

    .buttons {
      padding: 10px;
      display: flex;
      justify-content: center;
      background: #ffffff;
      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);

      .el-button {
        width: 110px;
      }

      .cancel {
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #e7f0ff;
        font-weight: 400;
        font-size: 16px;
        color: #8894a8;
      }

      .save {
        //background: #10a6dd;
        border-radius: 4px;
        //color: #ffffff;
      }

      .publish {
        //background: #ffffff;
        border-radius: 4px;
        //color: #10a6dd;
        //border: 1px solid #10a6dd;
      }
    }
  }
}
</style>
